<template>
	<view>
		<view class="header">
			<view class="name"> {{name}} </view>
			<view class="con">{{con}}</view>
		</view>
		<view class="content">
			<view class="item" v-for="(item, i) in list" :key="i">
				<view class="title">{{item.questionnaireQuestion.questionnaireQuestionId}}、{{item.questionnaireQuestion.questionnaireSubjectContent}}</view>
				<radio-group>
					<label class="uni-list-cell uni-list-cell-pd" v-for="(op, index) in item.questionnaireOptions" :key="index">
						<view class="option">
							<radio :checked="ans[i] == op.optionType" />{{op.optionContent}}
						</view>
					</label>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQuestionAnswerDetailList,
		getQuestionnaireDetail
	} from '@/api/questionnaire.js'
	export default {
		data() {
			return {
				qid: '', //问卷id
				id: '', //作答人id
				name:'',
				list:[],
				ans:[],
				con:''
			}
		},
		methods: {
			getData() {
				getQuestionnaireDetail({
					questionnaireId:this.qid
				}).then(res=>{
					this.name = res.data.data[0].questionnaire.name
					this.con = res.data.data[0].questionnaire.con
					this.list = res.data.data[0].list
				}).catch(err=>{
					uni.showModal({
						content:'请求失败'
					})
				})
				getQuestionAnswerDetailList({
						userId: this.id,
						answer:1,
						questionnaireId: this.qid,
					}).then(res => {
						// console.log(res)
						
						for(let i in res.data.data.list){
							this.ans.push(res.data.data.list[i].questionnaireAnswer.answer)
						}
						uni.hideLoading()
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					uni.showModal({
						content: '请求失败'
					})
				})
			},
		},
		onLoad(option) {
			this.qid = option.qid
			this.id = option.id
			this.getData()
			uni.showLoading()
		}
	}
</script>
<style>
	page{
		background-color: #FFFAEE;
		background-image: linear-gradient(#FFFAEE, #ffe0c5);
		font-family: 'Courier New', Courier, monospace;
		padding-bottom: 30px;
	}
	
	.header {
		padding: 20px 10px;
		margin: 0 10px;
		border-radius: 20px;
		color: #646464;
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
	}

	.header .name {
		font-size: 25px;
		/* text-align: center; */
	}

	.header .con {
		/* text-indent: 36px; */
		margin: 10px 0;
	}

	.content .item {
		margin: 10px 20px;
		padding: 10px;
		border: 1px dotted #C0C0C0;
		border-radius: 15px;
		background-color: #FFFFFF;
		box-shadow: 10px 10px 5px #888888;
	}

	.content .title {
		margin-bottom: 10px;
	}

	.content .option {
		border-bottom: 1px solid #dde5ed;
		border-radius: 5px;
		padding: 10rpx;
		margin-bottom: 10rpx;
	}

	.content .option radio {
		margin: 0 10px;
	}

	.footer {
		margin: 30px 20px 50px 20px;
	}

	.footer .tip {
		margin: 10px 0 20px 0;
	}

	.footer .tip .ti {
		display: inline-block;
		margin-left: 20px;
		margin-bottom: 20px;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #DDDDDD;
		box-shadow: 2px 2px 1px #888888;
	}

	.footer .tip .do {
		background-color: #fecbad;
	}
</style>
